<template>
	<div class="headnav">
		<div class="left">
			<slot name='left'></slot>
		</div>
		<div class="center">
			<slot name='center'></slot>
		</div>
		<div class="right">
			<slot name='right'></slot>
		</div>
	</div>
</template>
<script>
	export default {
		name:'headNav',

	}
</script>
<style>
	.headnav{
		width: 100%;
		height:44px;
		background-color: #fea7bd;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		color: #ffffff
	}
	.left{
		width: 15%;
		text-align: center;
	}
	.center{
		width: 70%;
		text-align: center
	}
	.right{
		width: 15%;
		text-align: center;
	}
</style>